/**
 * @name jQuery imageMaps plugin
 * @license GPL
 * @version 0.0.4
 * @date 11 22, 2010
 * @category jQuery plugin
 * @author Simon Tang (www@yiye.name)
 * @copyright (c) 2010 Simon Tang (http://yiye.name/)
 */
var $container;
(function($) {
    jQuery.fn.imageMaps = function(setting) {
        $container = this;
        if ($container.length == 0) return false;
		$container.each(function(){
			var container = $(this);
			var $images = container.find('img[ref=imageMaps]');
			$images.wrap('<div class="image-maps-conrainer" style="position:relative;"></div>').css('border','1px solid #ccc');
			$images.each(function(){
				var _img_conrainer = $(this).parent();
				_img_conrainer.append('<div class="button-conrainer" style="margin: 10px 0px 10px 0px;"><input type="button" onclick="addHot(this)" value="增加热点" class="btn" />&nbsp;<!--input type="button" id="preview" value="预览" /-->&nbsp;<input type="button" id="delImage" value="删除" class="btn"/></div>').append('<div class="link-conrainer"></div>').append(navigator.mise ? $('<div class="position-conrainer" style="position:absolute"></div>').css({
					background:'#fff',
					opacity:0
				}) : '<div class="position-conrainer" style="position:absolute"></div>');
				var _img_offset = $(this).offset();
				var _img_conrainer_offset = _img_conrainer.offset();
				
				//获取图片的真实宽高
				$("<img/>").attr("src", $(this).attr("src")).load(function() {
					_img_conrainer.find('.position-conrainer').css({
						//top: _img_offset.top - _img_conrainer_offset.top,
						top: 0,
						left: _img_offset.left - _img_conrainer_offset.left,
						width:this.width,
						height:this.height,
						border:'1px solid transparent'
					});
	            });
				
				var map_name = $(this).attr('usemap').replace('#','');
				if(map_name !=''){
					var index = 1;
					var _link_conrainer = _img_conrainer.find('.link-conrainer');
					var _position_conrainer = _img_conrainer.find('.position-conrainer');
					var image_param = $(this).attr('name') == '' ? '' : '['+ $(this).attr('name') + ']';
					container.find('map[name='+map_name+']').find('area[shape=rect]').each(function(){
						var coords = $(this).attr('coords');
						var mhId = $(this).attr('mhId');
						var phoId = $(this).attr('parentId');
						_link_conrainer.append('<p ref="'+index+'" class="map-link"><span class="link-number-text">链接'+index+'</span>:<input type="hidden" id="mhId" value="'+mhId+'"/><input type="text" class="hotLink required" style="width: 400px;" size="60" name="link'+image_param+'['+index+']" value="'+$(this).attr('href')+'" /><input type="hidden" class="rect-value" name="rect'+image_param+'['+index+']" value="'+coords+'" /></p>');
						coords = coords.split(',');
						_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:'+coords[0]+'px;top:'+coords[1]+'px;width:'+(coords[2]-coords[0])+'px;height:'+(coords[3]-coords[1])+'px; text-align: center; vertical-align: middle;line-height: 30px;"><div class="map-position-bg" phoId="'+phoId+'"></div><span class="link-number-text">链接'+index+'</span><span class="delete">X</span><span class="resize" phoId="'+phoId+'"></span></div>');
						index++;
					});
				}
			});
			
		});
		
		//预览
		$('.button-conrainer input[id=preview]').click(function(){
			previewDiv();
		});
		
		//删除
		$('.button-conrainer input[id=delImage]').click(function(){
			if(confirm("是否确定删除？")){
				$(this).parent().parent().parent().hide();
			}
		});
		
		//绑定map事件
		function bind_map_events(){
			$('.position-conrainer .map-position .map-position-bg').each(function(){
				var phoDivId = "#"+$(this).attr("phoId");
				var map_position_bg = $(this);
				var conrainer = $(this).parent().parent();
				map_position_bg.unbind('mousedown').mousedown(function(event){
					map_position_bg.data('mousedown', true);
					map_position_bg.data('pageX', event.pageX);
					map_position_bg.data('pageY', event.pageY);
					map_position_bg.css('cursor','move');
					return false;
				}).unbind('mouseup').mouseup(function(event){
					map_position_bg.data('mousedown', false);
					map_position_bg.css('cursor','default');
					return false;
				});
				conrainer.mousemove(function(event){
					if (!map_position_bg.data('mousedown')) return false;
                    var dx = event.pageX - map_position_bg.data('pageX');
                    var dy = event.pageY - map_position_bg.data('pageY');
                    if ((dx == 0) && (dy == 0)){
                        return false;
                    }
					var map_position = map_position_bg.parent();
					var p = map_position.position();
					var left = p.left+dx;
					if(left <0) left = 0;
					var top = p.top+dy;
					if (top < 0) top = 0;
					var bottom = top + map_position.height();
					if(bottom > conrainer.height()){
						top = top-(bottom-conrainer.height());
					}
					var right = left + map_position.width();
					if(right > conrainer.width()){
						left = left-(right-conrainer.width());
					}
					map_position.css({
						left:left,
						top:top
					});
					map_position_bg.data('pageX', event.pageX);
					map_position_bg.data('pageY', event.pageY);
					
					bottom = top + map_position.height();
					right = left + map_position.width();
					$(phoDivId+' .link-conrainer p[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,right,bottom).join(','));
					return false;
				}).mouseup(function(event){
					map_position_bg.data('mousedown', false);
					map_position_bg.css('cursor','default');
					return false;
				});
			});
			$('.position-conrainer .map-position .resize').each(function(){
				var phoDivId = "#"+$(this).attr("phoId");
				var map_position_resize = $(this);
				var conrainer = $(this).parent().parent();
				map_position_resize.unbind('mousedown').mousedown(function(event){
					map_position_resize.data('mousedown', true);
					map_position_resize.data('pageX', event.pageX);
					map_position_resize.data('pageY', event.pageY);
					return false;
				}).unbind('mouseup').mouseup(function(event){
					map_position_resize.data('mousedown', false);
					return false;
				});
				conrainer.mousemove(function(event){
					if (!map_position_resize.data('mousedown')) return false;
                    var dx = event.pageX - map_position_resize.data('pageX');
                    var dy = event.pageY - map_position_resize.data('pageY');
                    if ((dx == 0) && (dy == 0)){
                        return false;
                    }
					var map_position = map_position_resize.parent();
					var p = map_position.position();
					var left = p.left;
					var top = p.top;
					var height = map_position.height()+dy;
					if((top+height) > conrainer.height()){
						height = height-((top+height)-conrainer.height());
					}
					if (height <20) height = 20;
					var width = map_position.width()+dx;
					if((left+width) > conrainer.width()){
						width = width-((left+width)-conrainer.width());
					}
					if(width <20) width = 20;
					map_position.css({
						width:width,
						height:height
					});
					map_position_resize.data('pageX', event.pageX);
					map_position_resize.data('pageY', event.pageY);
					
					bottom = top + map_position.height();
					right = left + map_position.width();
					$(phoDivId+' .link-conrainer p[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,right,bottom).join(','));
					return false;
				}).mouseup(function(event){
					map_position_resize.data('mousedown', false);
					return false;
				});
			});
			$('.position-conrainer .map-position .delete').unbind('click').click(function(){
				var ref = $(this).parent().attr('ref');
				var _link_conrainer = $(this).parent().parent().parent().find('.link-conrainer');
				var _position_conrainer = $(this).parent().parent().parent().find('.position-conrainer');
				_link_conrainer.find('.map-link[ref='+ref+']').hide();
				_position_conrainer.find('.map-position[ref='+ref+']').hide();
				var index = 1;
				_link_conrainer.find('.map-link').each(function(){
					$(this).attr('ref',index).find('.link-number-text').html('链接'+index);
					index ++;
				});
				index = 1;
				_position_conrainer.find('.map-position').each(function(){
					$(this).attr('ref',index).find('.link-number-text').html('链接'+index);
					index ++;
				});
			});
		}
		
		bind_map_events();
		
		function define_csss(){
			//样式定义
			$container.find('.map-position').css({
				position:'absolute',
				border:'1px solid #000',
				'font-weight':'bold'
			});
			$container.find('.map-position .map-position-bg').css({
				position:'absolute',
				background:'#FFF',
				opacity:0.1,
				top:0,
				left:0,
				right:0,
				bottom:0
			});
			$container.find('.map-position .resize').css({
				display:'block',
				position:'absolute',
				right:0,
				bottom:0,
				width:5,
				height:5,
				cursor:'nw-resize',
				background:'#000'
			});
			$container.find('.map-position .delete').css({
				display:'block',
				position:'absolute',
				right:0,
				top:0,
				width:10,
				height:12,
				'line-height':'11px',
				'font-size':12,
				'font-weight':'bold',
				background:'#000',
				color:'#fff',
				'font-family':'Arial',
				'padding-left':'2px',
				cursor:'pointer',
				opactiey : 1
			});
		}
		define_csss();
    };
})(jQuery); 

//增加热点
function addHot(obj){
	var phoId = $(obj).parent().parent().parent().attr("id");
	var _link_conrainer = $(obj).parent().parent().find('.link-conrainer');
	var _position_conrainer = $(obj).parent().parent().find('.position-conrainer');
	var index = _link_conrainer.find('.map-link').length +1;
	var image = $(obj).parent().parent().find('img[ref=imageMaps]').attr('name');
	image = (image == '' ? '' : '['+ image + ']');
	_link_conrainer.append('<p ref="'+index+'" class="map-link"><span class="link-number-text">链接'+index+'</span>:<input type="hidden" id="mhId" value="0"/><input type="text" class="hotLink required" style="width: 400px;" size="60" name="link'+image+'['+index+']" value="" /><input type="hidden" class="rect-value" name="rect'+image+'['+index+']" value="10,10,135,65" /></p>');
	_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:10px;top:10px;width:90px;height:30px;"><div class="map-position-bg" phoId="'+phoId+'"></div><span class="link-number-text">链接'+index+'</span><span class="delete">X</span><span class="resize" phoId="'+phoId+'"></span></div>');
	bind_map_event();
	define_css(obj);
}
//绑定map事件
function bind_map_event(){
	$('.position-conrainer .map-position .map-position-bg').each(function(){
		var phoDivId = $(this).attr("phoId");
		var map_position_bg = $(this);
		var conrainer = $(this).parent().parent();
		map_position_bg.unbind('mousedown').mousedown(function(event){
			map_position_bg.data('mousedown', true);
			map_position_bg.data('pageX', event.pageX);
			map_position_bg.data('pageY', event.pageY);
			map_position_bg.css('cursor','move');
			return false;
		}).unbind('mouseup').mouseup(function(event){
			map_position_bg.data('mousedown', false);
			map_position_bg.css('cursor','default');
			return false;
		});
		conrainer.mousemove(function(event){
			if (!map_position_bg.data('mousedown')) return false;
            var dx = event.pageX - map_position_bg.data('pageX');
            var dy = event.pageY - map_position_bg.data('pageY');
            if ((dx == 0) && (dy == 0)){
                return false;
            }
			var map_position = map_position_bg.parent();
			var p = map_position.position();
			var left = p.left+dx;
			if(left <0) left = 0;
			var top = p.top+dy;
			if (top < 0) top = 0;
			var bottom = top + map_position.height();
			if(bottom > conrainer.height()){
				top = top-(bottom-conrainer.height());
			}
			var right = left + map_position.width();
			if(right > conrainer.width()){
				left = left-(right-conrainer.width());
			}
			map_position.css({
				left:left,
				top:top
			});
			map_position_bg.data('pageX', event.pageX);
			map_position_bg.data('pageY', event.pageY);
			
			bottom = top + map_position.height();
			right = left + map_position.width();
			$(phoDivId+' .link-conrainer p[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,right,bottom).join(','));
			return false;
		}).mouseup(function(event){
			map_position_bg.data('mousedown', false);
			map_position_bg.css('cursor','default');
			return false;
		});
	});
	$('.position-conrainer .map-position .resize').each(function(){
		var phoDivId = "#"+$(this).attr("phoId");
		var map_position_resize = $(this);
		var conrainer = $(this).parent().parent();
		map_position_resize.unbind('mousedown').mousedown(function(event){
			map_position_resize.data('mousedown', true);
			map_position_resize.data('pageX', event.pageX);
			map_position_resize.data('pageY', event.pageY);
			return false;
		}).unbind('mouseup').mouseup(function(event){
			map_position_resize.data('mousedown', false);
			return false;
		});
		conrainer.mousemove(function(event){
			if (!map_position_resize.data('mousedown')) return false;
            var dx = event.pageX - map_position_resize.data('pageX');
            var dy = event.pageY - map_position_resize.data('pageY');
            if ((dx == 0) && (dy == 0)){
                return false;
            }
			var map_position = map_position_resize.parent();
			var p = map_position.position();
			var left = p.left;
			var top = p.top;
			var height = map_position.height()+dy;
			if((top+height) > conrainer.height()){
				height = height-((top+height)-conrainer.height());
			}
			if (height <20) height = 20;
			var width = map_position.width()+dx;
			if((left+width) > conrainer.width()){
				width = width-((left+width)-conrainer.width());
			}
			if(width <20) width = 20;
			map_position.css({
				width:width,
				height:height
			});
			map_position_resize.data('pageX', event.pageX);
			map_position_resize.data('pageY', event.pageY);
			
			bottom = top + map_position.height();
			right = left + map_position.width();
			$(phoDivId+' .link-conrainer p[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,right,bottom).join(','));
			return false;
		}).mouseup(function(event){
			map_position_resize.data('mousedown', false);
			return false;
		});
	});
	$('.position-conrainer .map-position .delete').unbind('click').click(function(){
		var ref = $(this).parent().attr('ref');
		var _link_conrainer = $(this).parent().parent().parent().find('.link-conrainer');
		var _position_conrainer = $(this).parent().parent().parent().find('.position-conrainer');
		_link_conrainer.find('.map-link[ref='+ref+']').remove();
		_position_conrainer.find('.map-position[ref='+ref+']').remove();
		var index = 1;
		_link_conrainer.find('.map-link').each(function(){
			$(this).attr('ref',index).find('.link-number-text').html('链接'+index);
			index ++;
		});
		index = 1;
		_position_conrainer.find('.map-position').each(function(){
			$(this).attr('ref',index).find('.link-number-text').html('链接'+index);
			index ++;
		});
	});
}

function define_css(obj){
	$container = $(obj).parent().parent().parent();
	//样式定义
	$container.find('.map-position').css({
		position:'absolute',
		border:'1px solid #000',
		'font-weight':'bold'
	});
	$container.find('.map-position .map-position-bg').css({
		position:'absolute',
		background:'#FFF',
		opacity:0.1,
		top:0,
		left:0,
		right:0,
		bottom:0
	});
	$container.find('.map-position .resize').css({
		display:'block',
		position:'absolute',
		right:0,
		bottom:0,
		width:5,
		height:5,
		cursor:'nw-resize',
		background:'#000'
	});
	$container.find('.map-position .delete').css({
		display:'block',
		position:'absolute',
		right:0,
		top:0,
		width:10,
		height:12,
		'line-height':'11px',
		'font-size':12,
		'font-weight':'bold',
		background:'#000',
		color:'#fff',
		'font-family':'Arial',
		'padding-left':'2px',
		cursor:'pointer',
		opactiey : 1
	});
}